<template>
    <el-form label-suffix=":" v-loading="loading" :model="formData" :rules="formRules" ref="formRef" label-width="120px">
        <el-row>
            <vp-col :span="4">
                <el-form-item prop="bh">
                    <template #label><vp-label zh="清单事件编号" en="Incident No."/></template>
                    <el-input 
                        v-model="formData.bh"
                        maxlength="100"
                        placeholder="不填写则自动生成"
                    />
                </el-form-item>
            </vp-col>
            <vp-col :span="4">
                <el-form-item prop="sjrq">
                    <template #label><vp-label zh="事件日期" en="Incident Date"/></template>
                    <el-date-picker 
                        v-model="formData.sjrq" 
                        type="date" 
                        value-format="YYYY-MM-DD" 
                        class="w100"
                    />
                </el-form-item>
            </vp-col>
            <vp-col :span="4">
                <el-form-item prop="fjid">
                    <template #label><vp-label zh="机号" en="A/C REG"/></template>
                    <AircraftSelect 
                        :selectedId="formData.fjzch" 
                        :fjjx="true"
                        @aircraftSelected="chooseAircraft" 
                        class="w100"
                    />
                </el-form-item>
            </vp-col>
            <vp-col :span="4">
                <el-form-item prop="fjjx">
                    <template #label><vp-label zh="机型" en="A/C Type"/></template>
                    <span>{{formData.fjjx}}</span>
                </el-form-item>
            </vp-col>
        </el-row>
        <el-row>
            <vp-col :span="2">
                <el-form-item prop="sfdid">
                    <template #label><vp-label zh="事发地点" en="Incident Location"/></template>
                    <el-input readonly v-model="formData.sfdmc">
                        <template #append>
                            <el-button @click="searchBaseAndAirport"><SvgIcon name="ele-Search"/></el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </vp-col>
        </el-row>
        <el-row>
            <vp-col :span="1">
                <el-form-item prop="sjjg">
                    <template #label><vp-label zh="事件经过" en="Incident Process"/></template>
                    <el-input
                        v-model="formData.sjjg"
                        :autosize="{ minRows: 3}"
                        type="textarea"
                        maxlength="1300"
                    />
                </el-form-item>
            </vp-col>
        </el-row>
        <el-row>
            <vp-col :span="1">
                <el-form-item prop="clff">
                    <template #label><vp-label zh="处理方法" en="Handling Method"/></template>
                    <el-input
                        v-model="formData.clff"
                        :autosize="{ minRows: 3}"
                        type="textarea"
                        maxlength="1300"
                    />
                </el-form-item>
            </vp-col>
        </el-row>
        <el-row>
            <vp-col :span="4">
                <el-form-item prop="fsjd">
                    <template #label><vp-label zh="发生阶段" en="Occurrence Stage"/></template>
                    <DictSelect 
                        :lxid='2001'
                        :selectedId='formData.fsjd'
                        @dictSelected='(dict: any) => {formData.fsjd = dict}'
                        class="w100"
                    />
                </el-form-item>
            </vp-col>
            <vp-col :span="4">
                <el-form-item prop="sjzt">
                    <template #label><vp-label zh="状态" en="Status"/></template>
                    <DictSelect 
                        :lxid='2003'
                        :selectedId='formData.sjzt'
                        @dictSelected='(dict: any) => {formData.sjzt = dict}'
                        class="w100"
                    />
                </el-form-item>
            </vp-col>
            <vp-col :span="4">
                <el-form-item prop="sjxz">
                    <template #label><vp-label zh="事件性质" en="Incident Nature"/></template>
                    <DictSelect 
                        :lxid='2004'
                        :selectedId='formData.sjxz'
                        @dictSelected='(dict: any) => {formData.sjxz = dict}'
                        class="w100"
                    />
                </el-form-item>
            </vp-col>
        </el-row>
        <el-row>
            <vp-col :span="4">
                <el-form-item prop="bsjufbs">
                    <template #label><vp-label zh="报送局方" en="Submit To CAAC"/></template>
                    <el-select v-model="formData.bsjufbs" class="w100">
                        <el-option label="是 YES" :key="1" :value="1"></el-option>
                        <el-option label="否 NO" :key="0" :value="0"></el-option>
                    </el-select>
                </el-form-item>
            </vp-col>
            <vp-col :span="4">
                <el-form-item prop="bsjiafbs">
                    <template #label><vp-label zh="报送甲方" en="Submit To Party A"/></template>
                    <el-select v-model="formData.bsjiafbs" class="w100">
                        <el-option label="是 YES" :key="1" :value="1"></el-option>
                        <el-option label="否 NO" :key="0" :value="0"></el-option>
                    </el-select>
                </el-form-item>
            </vp-col>
        </el-row>
        <el-row>
            <vp-col :span="1">
                <el-form-item prop="bz">
                    <template #label><vp-label zh="备注" en="Remark"/></template>
                    <el-input
                        v-model="formData.bz"
                        :autosize="{ minRows: 3}"
                        type="textarea"
                        maxlength="1300"
                    />
                </el-form-item>
            </vp-col>
        </el-row>
        <el-row>
            <vp-col :span="1">
                <el-form-item prop="csgz">
                    <template #label><vp-label zh="措施跟踪" en="Measures Tracking"/></template>
                    <el-input
                        v-model="formData.csgz"
                        :autosize="{ minRows: 3}"
                        type="textarea"
                        maxlength="1300"
                    />
                </el-form-item>
            </vp-col>
        </el-row>

        <AirportAndPlatformDialog  ref="airportAndPlatformDialogRef"></AirportAndPlatformDialog>
    </el-form>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import validateUtils from '/@/utils/validateUtils';
// import AircraftSelect from '/@/components/vp/aircraft/VpAircraftSelect.vue';
import DictSelect from '/@/components/vp/dict/VpDictSelect.vue';

export default defineComponent({
    name:'abnormalList',
    props: {
        type: {
            type: String,
            default: 'add',
        }
    },
    components: { DictSelect },
    setup(props) {
        const state = reactive({
            loading: false,
            saveLoading: false,
            csid: '',
            csmc: '',
            formData:{
                id: '',
                bh: '',
                sjrq: '',
                fjid: '',
                fjzch: '',
                fjjx: '',
                sjjg: '',
                clff: '',
                sjzt: '',
                sjxz: '',
                fsjd: '',
                sfdid: '',
                sfdmc: '',
                sfdlx: null,
                bsjufbs: null,
                bsjiafbs: null,
                bz: '',
                csgz: '',
                jdid: '',
            },
            formRules:{
                sjrq: [validateUtils.notNull],
                // fjid: [validateUtils.notNull],
            },
		});

        const initFormData = ()=>{
            state.formData = {
                id: '',
                bh: '',
                sjrq: '',
                fjid: '',
                fjzch: '',
                fjjx: '',
                sjjg: '',
                clff: '',
                sjzt: '',
                sjxz: '',
                fsjd: '',
                sfdid: '',
                sfdmc: '',
                sfdlx: null,
                bsjufbs: null,
                bsjiafbs: null,
                bz: '',
                csgz: '',
                jdid: '',
            }
        }

        const editDialogRef = ref();
        const formRef = ref();
        const airportAndPlatformDialogRef = ref();

        /**
         * 设置页面数据
         */
        const setData = (formData: any) => {
            initFormData();
            state.formData = {
                ...state.formData,
                ...formData,
            };
        }

        /**
         * 获取页面数据
         */
        const getData = () => {
            return {
                ...state.formData
            };
        }

        /**
         * 选择飞机
         * @param obj 飞机
         */
        const chooseAircraft = (obj: any) => {
            state.formData.fjid = obj.fjid;
            state.formData.fjzch = obj.fjzch;
            state.formData.fjjx = obj.fjjx;
        }

        /**
         * 查询基地和机场
         */
        const searchBaseAndAirport = () => {
            airportAndPlatformDialogRef.value.handleOpen({
                selectedId : state.formData.sfdid,
                callback:(data :any)=>{
                    state.formData.sfdid = data.id;
                    state.formData.sfdmc = data.mc;
                    state.formData.sfdlx = data.lx;
                }
            });
        };

        /**
         * 验证页面数据
         */
        const validate = () => {
            let promise = new Promise((resolve, reject) => {
                formRef.value.validate((valid: boolean) => {
                    if (valid) {
                        resolve(true);
                    } else {
                        reject();
                    }
                })
            })
            return promise;
        }

        return {
            ...toRefs(state),
            ...toRefs(props),
            editDialogRef,
            formRef,
            setData,
            getData,
            chooseAircraft,
            airportAndPlatformDialogRef,
            searchBaseAndAirport,
            validate,
        }
    },
})
</script>